<html lang="en">
 <head>
  <script src="/static/jquery-1.11.0.min.js"></script>
  <script src="/static/sockjs-0.3.min.js"></script>
  <script type="text/javascript" src="/static/ichart.1.2.js"></script>
  <script src="/static/index.js"></script>
  <link href="/static/mycss.css" rel="stylesheet" type="text/css" />
  <script src="/static/light.js"></script>
  <meta charset="UTF-8" />
  <title>Sock chat</title>
  <style type="text/css">


body,div,ul,li{

 margin:0 auto;

 padding:0;

}

body{

 font:12px "宋体";

 text-align:center;

}

a:link{

 color:#00F;

 text-decoration:none;

}

a:visited {

 color: #00F;

 text-decoration:none;

}

a:hover {

 color: #c00;

 text-decoration:underline;

}

ul{

 list-style:none;

}

.main{

 clear:both;

 padding:8px;

 text-align:center;

}


#tabs0 {

 height: 950px;

 width: 1800px;

 border: 1px solid #cbcbcb;

 background-color: #f2f6fb;

}

.menu0{

 width: 2300px;

}

.menu0 li{

 display:block;

 float: left;

 padding: 7px 0;

 width:150px;

 text-align: center;

 cursor:pointer;

 background: #FFFFff;

}

.menu0 li.hover{

 background: #f2f6fb;

}

#main0 ul{

 display: none;

}

#main0 ul.block{

 display: block;

}

</style>
  <script>

function setTab(m,n){

 var tli=document.getElementById("menu"+m).getElementsByTagName("li");

 var mli=document.getElementById("main"+m).getElementsByTagName("ul");

 for(i=0;i<tli.length;i++){

  tli[i].className=i==n?"hover":"";

  mli[i].style.display=i==n?"block":"none";

 }

}

</script>
 </head>
 <body>
  <br />
  <br />
  <div id="tabs0">
   <ul class="menu0" id="menu0">
    <li onclick="setTab(0,0)" class="hover">温湿度下拉框</li>
    <li onclick="setTab(0,1)">紫外烟感报警</li>
    <li onclick="setTab(0,2)">温湿度变化表格</li>
    <li onclick="setTab(0,3)">温湿度变化曲线图</li>
   </ul>
   <div class="main" id="main0">
    <ul class="block">
     <li>
     <textarea id="chat-content" style="width:550px;height:800px"></textarea><br />
     <input type="text" name="" value="" id="username" placeholder="Choose username" />
     <input type="text" id="message" name="" value="" placeholder="Enter chat message" />
     <input type="button" name="" value="Send" onclick="sendMessage()" /> </li>
    </ul>
    <ul>
     <li> <input type="button" name="" id="id3" value="报警开启" onclick="id3()" /> <input type="button" name="" id="id0" value="关闭报警" onclick="id0()" /> </li>
    </ul>
    <ul>
     <li>
      <!-- Table goes in the document BODY -->
      <table id="data_table" class="hovertable">
       <tbody>
        <tr>
         <th>设备id</th>
         <th>温度</th>
         <th>湿度</th>
         <th>num</th>
        </tr>
       </tbody>
      </table> </li>
    </ul>
    <ul>
     <li>
      <!--<button id="show" onclick="show()">展示画面</button>-->
      <div id="canvasDiv"></div> </li>
    </ul>
   </div>
  </div>
 </body>
</html>
